<template>
	<view>
		<view class="signDay">
			<view class="signDay_top">
				<p>已连续签到<text>{{day}}</text>天</p>
				<p>在连续签到{{num}} 天<span>{{text}}加油金</span></p>
				<ul class="dayTit flex">
					<li  class="" v-for="(item,index) in dayList" :key="index" :class="{'active':isActive==index}" @click="chenked(index)">
						<p>{{item.num}}</p>
					</li>				
				</ul>
			</view>
			<view class="qian_content">
				<view class="qian_top flex">
					<h1>做任务赚奖励</h1>
					<p>任务记录&gt;</p>
				</view>
				<view class="qian-list">
					<view class="qian_box">
						加油任务3选1
					</view>
					<ul class="qian-lists">
						<li v-for="(item,index) in task" :key="index" class="flex">
							<view class="lists_left">
								<p><image :src="item.src" mode="widthFix" class="img"></image> {{item.title}} <text>{{item.jia}}</text></p>
							<span>{{item.text}}</span>
							</view>
							<view class="lists_right">
								
							<span>{{item.ling}}</span>
							</view>
						</li>
					</ul>
				</view>
				<view class="qian-list">
					<view class="qian_box">
						加油任务3选1
					</view>
					<ul class="qian-lists">
						<li v-for="(item,index) in tasks" :key="index" class="flex">
							<view class="lists_left">
								<p><image :src="item.src" mode="widthFix" class="img"></image> {{item.title}} <text>{{item.jia}}</text></p>
							<span>{{item.text}}</span>
							</view>
							<view class="lists_right">							
							<span>{{item.ling}}</span>
							</view>
						</li>
					</ul>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data(){
			return{
				day:1,
				num:1,
				text:1.2,
				isActive: 0,
				index: 0,
				dayList:[
					{id:'1',num:'0.3',src:'../../static/qd1.png'},
					{id:'2',num:'0.5',src:'../../static/qd1.png'},
					{id:'3',num:'1',src:'../../static/qd1.png'},
					{id:'4',num:'1',src:'../../static/qd2.png'},
					{id:'5',num:'1',src:'../../static/qd2.png'},
					{id:'6',num:'1',src:'../../static/qd2.png'},
					{id:'7',num:'1',src:'../../static/qd1.png'}
				],
				task:[
					{id:'1',src:'../../static/qd3.png',title:'3天内加满300元',jia:'+5加油金',text:'3天累计消费返豪礼，最高得5加油金',ling:'领取任务'},
					{id:'2',src:'../../static/qd4.png',title:'28天内加满650元',jia:'+10加油金',text:'28天累计消费返豪礼，最高得10加油金',ling:'领取任务'},
					{id:'3',src:'../../static/qd5.png',title:'28天内加满800元',jia:'+5加油金',text:'15天累计消费返豪礼，最高得15加油金',ling:'领取任务'},					
				],
				tasks:[
					{id:'1',src:'../../static/qd3.png',title:'添加团油福利官',jia:'+1加油金',text:'3天累计消费返豪礼，最高得5加油金',ling:'去添加'},
					{id:'2',src:'../../static/qd4.png',title:'浏览省钱专区',jia:'+0.3加油金',text:'超值卷包低至4.5折',ling:'去浏览'},
					{id:'3',src:'../../static/qd5.png',title:'降价提醒',jia:'+1加油金',text:'订阅油价变动提醒，加油少花钱',ling:'去领取'},
					{id:'4',src:'../../static/qd7.png',title:'车管认证',jia:'+0.5加油金',text:'认证后获取定制服务',ling:'去打开'},
					{id:'5',src:'../../static/qd7.png',title:'车管认证',jia:'+0.5加油金',text:'认证后获取定制服务',ling:'去打开'},
					{id:'6',src:'../../static/qd5.png',title:'车管认证',jia:'+0.5加油金',text:'认证后获取定制服务',ling:'去打开'},
					{id:'7',src:'../../static/qd7.png',title:'车管认证',jia:'+0.5加油金',text:'认证后获取定制服务',ling:'去打开'},
					{id:'8',src:'../../static/qd7.png',title:'车管认证',jia:'+0.5加油金',text:'认证后获取定制服务',ling:'去打开'},
				]
			}
		},
		methods:{
			chenked:function(index){
				console.log(index)
				this.isActive = index;
			}
		}
	}
</script>
<style>
	page{background-color: #ffe6ce;}
	.img{display: inline-block;width: 30rpx ;height: 30rpx;}
	.flex{display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	.signDay{padding: 80rpx  0 20rpx;background-image:linear-gradient(to bottom ,#ff6914 ,#fffbfc)}
	.signDay_top{width:95%;margin: 10rpx auto;background-color: #fff;border-radius: 20rpx;}
	.signDay_top p{line-height: 50rpx;padding: 20rpx;box-sizing: border-box;}
	.signDay_top text, .signDay_top p span{color: #ff5050;}
	.active{background-color: #f00 !important;}
	.dayTit{padding-bottom: 20rpx;}
	.dayTit li{width: 13%;padding: 2rpx;background-color: #fefae3;text-align: center;}
	.qian_top{margin: 20rpx 0;}
	.qian_top h1{font-weight: bold;color: #4c1e18;font-size: 40rpx;}
	.qian_top p{color: #4c1e18;}
	.qian_content{width: 95%;margin: 0 auto;}
	.qian-list{padding: 0rpx 20rpx;background-color: #fff;overflow: auto;border-radius: 30rpx;margin-bottom: 20rpx;}
	.qian_box{width: 300rpx;line-height: 60rpx;text-align: center;background-image:linear-gradient(to right, #fbedfc, #fcfbe8) ;border-radius: 20rpx;margin: 0rpx auto 20rpx;box-sizing: border-box;}

	.qian-lists li{padding: 30rpx 10rpx;border-bottom: 1px solid #000;}
	.qian-lists li:last-child{border-bottom: none;}
	.lists_left {width: 74%;}
	.lists_left p{font-size: 30rpx;font-weight: bold;color: #4c1e18;margin-bottom: 20rpx;}
	.lists_left text{color: #ff5500;display: inline-block;width:180rpx;line-height: 40rpx;background-color: #fff4e2;text-align: center;}
	.lists_left span{color: #8c8c8c;font-size: 26rpx;}
	.lists_right {width:20%;line-height: 70rpx;color: #fff!important ;background-color: #ff3a1b;border-radius: 20rpx;text-align: center;}
</style>